<template>
    <div class="map-box">
        <map2D
            :map.sync="map2D"
            @load="load"
            :isSvg="isSvg"
            v-if="mapType === '2D'"
        />
        <map3D :map.sync="map3D" v-if="mapType === '3D'" />
        <!-- 工具条组件 -->
        <tools
            :toolList="toolList"
            :topClass="topClass"
            :topTools="topTools"
            @showTools="showTools"
            v-if="tools"
        />
        <!-- 滚动条组件 -->
        <pieProcess
            @swiper="handleFocus"
            :yearLayer="processData"
            v-if="process"
            @focus="handleFocus"
        />
        <!-- 位置信息组件 -->
        <div class="pie-coord" v-if="coord">
            <div>
                <i class="el-icon-aim"></i>
            </div>
            <div>当前位置:</div>
            <div>X：{{ x }} Y：{{ y }}</div>
        </div>
        <!-- 图形切换组件 -->
        <div
            :class="{
                'pie-gis': true,
                'left-slide': !switchBool,
                'right-slide': switchBool,
            }"
            v-if="cutIcon"
        >
            <div v-if="selectBool">
                <div @click="swClick">
                    <img :src="require('@/assets/map/sw.png')" alt="" />
                </div>
                <div @click="dzClick">
                    <img :src="require('@/assets/map/dz.png')" alt="" />
                </div>
                <div @click="yxClick">
                    <img :src="require('@/assets/map/yx.png')" alt="" />
                </div>
            </div>
        </div>
        <!-- 服务组件-->
        <div v-show="btmTools" class="reduction">
            <img
                v-if="selectBool"
                @click="changeSelect(12, '复位')"
                src="@/assets/map/ditu_s.png"
                title="复位"
            />
            <img
                v-else
                @click="changeSelect(12, '复位')"
                src="@/assets/map/ditu.png"
                title="复位"
            />
        </div>
        <mapTool v-if="toolsData" @showTools="showTools" :tools="toolsData" />
    </div>
</template>

<script>
import { uuid } from "@/utils/lib";
import map2D from "./components/map2D.vue";
import map3D from "./components/map3D.vue";
import mapTool from "./components/mapTool.vue";
var esri = require("esri-leaflet");
export default {
    name: "pieMap",
    components: { map2D, map3D, mapTool },
    props: {
        toolsData: {
            type: Object,
        },
        on: {
            type: Object,
            default: () => {},
        },
        msg: {
            type: Object,
            default: () => {},
        },
        type: {
            type: String,
            default: "2D",
        },
        // svg底图
        isSvg: {
            type: Boolean,
            default: false,
        },
        // 工具栏
        btmTools: {
            type: Boolean,
            default: true,
        },
        // 工具栏
        tools: {
            type: Boolean,
            default: false,
        },
        // 工具栏下方工具条
        toolList: {
            type: Array,
        },
        // 工具栏上方工具条
        topTools: {
            type: Array,
        },
        // 工具栏上面的class
        topClass: {
            type: String,
            default: "",
        },
        // 过程条
        process: {
            type: Boolean,
            default: true,
        },
        processData: {
            type: Array,
        },
        // 坐标信息
        coord: {
            type: Boolean,
            default: true,
        },
        // 语音图标
        voiceIcon: {
            type: Boolean,
            default: false,
        },
        // 分类图标
        cutIcon: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            mapData: {
                layer: [],
            },
            silderMap: [],
            map2D: {},
            map3D: {},
            mapType: this.type,
            selectBool: true,
            maps: null,
            switchBool: false,
            x: 0,
            y: 0,
        };
    },
    created() {
        this.mapType = this.type;
    },
    mounted() {
        this.$nextTick(() => {
            this.mapHandle();
            // this.showTools('监控')
        });
    },

    methods: {
        load() {
            return this.mapHandle((map) => {
                this.mapEvent();
                this.$emit("load", map);
            });
        },
        // 地图轮播
        handleFocus(checks) {
            this.silderMap = [
                {
                    id: uuid(),
                    type: "vector",
                    value: checks.label,
                    href: checks.url,
                },
            ];
            let layer = [...this.mapData.layer, ...this.silderMap];
            this.layerUpdate(layer);
        },
        layerCheck() {
            // let bounds = this.map2D.map.getBounds();
            // console.log(bounds, "bounds");
            // this.map3D.viewer.camera.setView({
            //     destination: Cesium.Rectangle.fromDegrees(bounds),
            // });
            // this.mapHandle();
        },
        showTools(type) {
            this.$emit("showTools", type);
            if (type == "监控") {
                const markList = [
                    [27.5152587890625, 118.916015625],
                    [27.294158935546875, 118.9434814453125],
                    [27.217254638671875, 118.76014709472656],
                    [27.40814208984375, 118.66950988769531],
                    [27.46856689453125, 118.92219543457031],
                ];
                for (let item of markList) {
                    this.$map
                        .marker(item, {
                            icon: new L.Icon({
                                className: "lmap-icon",
                                iconUrl: require("../../assets/maps/monitor_icon.png"),
                                iconSize: [36, 48],
                            }),
                        })
                        .addTo(this.maps);
                }
            } else if (type === "放大") {
                this.map2D.map.zoomIn();
            } else if (type === "缩小") {
                this.map2D.map.zoomOut();
            }
        },
        changeSelect() {
            this.selectBool = !this.selectBool;
        },
        cutGisPanel() {
            this.switchBool = this.switchBool === true ? false : true;
        },
        swClick() {
            this.mapType = "3D";
        },
        dzClick() {
            this.mapType = "2D";
        },
        yxClick() {
            this.mapType = "2D";
        },
        voiceClick() {
            let { main, page, module } = this.$route.params;
            this.$router.push({
                path: "/voice",
                query: {
                    main,
                    page,
                    module,
                },
            });
            this.$emit("voice");
        },
        focus(a, b, c) {
            console.log(a, b, c, "params");
        },
        mapHandle(func = () => {}) {
            let map = this.mapType === "2D" ? this.map2D : this.map3D;
            return func(map);
        },
        addLayer(layer) {
            return this.mapHandle((map) => {
                console.log(map, "map");
                if (layer.href) {
                    map.addLayer(layer);
                }
            });
        },
        layerUpdate(data) {
            this.mapHandle((map) => {
                let { add, remove } = map.layerDataDispose(data);
                console.log(map, "mapmapmap");
                if (add) {
                    add.forEach((layer) => {
                        map.addLayer(layer);
                    });
                }
                if (remove) {
                    remove.forEach((layer) => {
                        map.removeLayer(layer);
                    });
                }
            });
        },
        isPopup(params, layer) {
            if (!params.popup) return;
            this.mapPopup(params.popup, layer);
        },
        mapPopup(params, layer) {
            return this.mapHandle((map) => {
                if (Array.isArray(params)) {
                    params.forEach((item) => {
                        map.popup(item, layer);
                    });
                } else {
                    map.popup(params, layer);
                }
            });
        },
        mapFlayTo(view) {
            return this.mapHandle((map) => {
                let layer = map.flayTo(view);
                this.isPopup(view, layer);
            });
        },
        mapDraw(draws) {
            return this.mapHandle((map) => {
                if (Array.isArray(draws)) {
                    draws.forEach((draw) => {
                        let { geoJSON, color, fillColor } = draw;
                        let layer = map.draw(geoJSON, { color, fillColor });
                        this.isPopup(draw, layer);
                    });
                } else {
                    let { geoJSON, color, fillColor } = draws;
                    let layer = map.draw(geoJSON, { color, fillColor });
                    this.isPopup(draws, layer);
                }
            });
        },
        mapPanTo(params) {
            this.mapHandle((map) => {
                map.panTo(params);
            });
        },
        mapEvent() {
            return this.mapHandle((map) => {
                if (!map.on) return;
                map.on({
                    ...this.on,
                    mousemove: (e) => {
                        let { lat, lng } = e.latlng;
                        this.x = (parseInt(lat * 100) / 100).toFixed(2);
                        this.y = (parseInt(lng * 100) / 100).toFixed(2);
                    },
                });
            });
        },
        clearMap() {
            return this.mapHandle((map) => {
                map.clearDraw();
            });
        },
        // 更新地图内容
        updateMap(data) {
            this.mapData = data;
            let analysis = {
                draw: (params) => this.mapDraw(params),
                view: (params) => this.mapFlayTo(params),
                popup: (params) => this.mapPopup(params),
                layer: (params) =>
                    this.layerUpdate([...params, ...this.silderMap]),
                center: (params) => this.mapPanTo(params),
                clear: (params) => this.clearMap(params),
            };
            for (let i in analysis) {
                if (analysis[i] && data[i]) analysis[i](data[i]);
            }
        },
    },
    watch: {},
};
</script>

<style lang="scss" scoped>
@import "@/styles/style.scss"; // global css

// .my-div-icon{
//     background: url('../../assets/maps/monitor_s.png') no-repeat !important;
//     background-size:100% 100%;
// }
.map--show {
    position: relative;
    z-index: 5;
}
.map-box {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    @include Switchover(0, 330);
}
.pie-map {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    width: 100%;
    height: 100%;
}
.pie-coord {
    position: absolute;
    display: flex;
    bottom: 0px;
    right: 260px;
    width: 360px;
    height: 48px;
    z-index: 10;
    color: #fff;
    line-height: 48px;
    font-size: 12px;
    // background: linear-gradient(
    //     270deg,
    //     rgba(0, 43, 108, 0.8) 0%,
    //     rgba(0, 34, 104, 0.8) 100%
    // );
    // border: 1px solid #0b6abe;
    > div {
        margin-left: 10px;
        cursor: pointer;
        &:nth-child(1) {
            width: 20px;
            height: 20px;
            line-height: 22px;
            border-radius: 50%;
            margin-top: 14px;
            &:hover {
                color: #31fcf9;
            }
        }
    }
}
.pie-gis {
    position: absolute;
    display: flex;
    bottom: 00px;
    right: 10px;
    width: 360px;
    height: 72px;
    z-index: 100;
    color: #fff;
    line-height: 48px;
    > div {
        display: flex;
        &:nth-child(1) {
            background: linear-gradient(
                270deg,
                rgba(0, 43, 108, 0.8) 0%,
                rgba(0, 34, 104, 0.8) 100%
            );
            border: 1px solid #0b6abe;
            cursor: pointer;
            div {
                margin-left: 5px;
                padding: 5px;
                line-height: 62px;
            }
            img {
                width: 100%;
                height: 100%;
            }

            &.gis-icon {
                line-height: 62px;
                color: #31fcf9;
            }
        }
    }

    // > div {
    //     margin-left: 10px;
    //     padding: 5px;
    //     line-height: 62px;
    //     cursor: pointer;
    //     img {
    //         width: 100%;
    //         height: 100%;
    //     }

    //     &.gis-icon {
    //         line-height: 62px;
    //         color: #31fcf9;
    //     }
    // }
}
.pie-process {
    position: absolute;
    left: 552px;
    bottom: 25px;
    z-index: 20;
}
.pie-voice {
    position: absolute;
    z-index: 100;
    top: 0px;
    left: 420px;
    width: 120px;
    height: 120px;
    img {
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
}
.reduction {
    position: absolute;
    z-index: 100;
    right: 15px;
    bottom: 15px;
    cursor: pointer;
    width: 38px;
    height: 38px;
}
.data-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    z-index: 100;
}
</style>